from pyecharts.charts import Bar, Line
from pyecharts import options as opts
from pyecharts.faker import Faker

# 一、柱状图
bar = (
    Bar()
    .add_xaxis(Faker.choose())
    .add_yaxis("图例", Faker.values())
    .set_global_opts(title_opts=opts.TitleOpts(title="柱状图"))
)

# 二、折线图
line = (
    Line()
    .add_xaxis(Faker.choose())
    .add_yaxis("图例", Faker.values())
    .set_global_opts(title_opts=opts.TitleOpts(title="取消"))
)

# 渲染图表并保存为 HTML 文件
bar.render("柱状图.html")
line.render("折线图.html")

# 读取两个 HTML 文件的内容
with open("柱状图.html", "r", encoding="utf-8") as f:
    bar_html = f.read()

with open("折线图.html", "r", encoding="utf-8") as f:
    line_html = f.read()

# 创建一个主 HTML 文件来展示所有图表
with open("单htm展示多图表.html", "w", encoding="utf-8") as f:
    html_content = f"""
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>组合图表</title>
        <!-- 引入 ECharts 和 PyEcharts 的 CSS 和 JS 文件 -->
        <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js"></script>
        {bar_html}
        {line_html}
    </head>
    <body>
        <div id="container">
            <div id="bar_chart" style="width: 800px;height:400px;"></div>
            <div id="line_chart" style="width: 800px;height:400px;"></div>
        </div>
    </body>
    </html>
    """
    f.write(html_content)
